@charset "utf-8";
@import "../base/conf";

//生成不同类型的class 
@mixin button-create($color,$background,$border){
	&{
		border-color:$border;
		color:$color;
	}
	&:hover{
		background-color:$border;
	}
	&.king-disabled,&[disabled]{
		background-color:lighten($background, 5%);
		border-color:$border;
		opacity:.65;
	}

	&.king-border{
		background:none;
		border-color:$border;
		@if $color == $defaultFontColor{		//.king-default 需要特殊处理color
			color:#555;
		}@else{
			color :$border;	
		}
		&.king-disabled,&[disabled]{
			opacity:.65;
			@if $color == $defaultFontColor{	//.king-default 需要特殊处理color
				color:lighten(#555,5%);
			}@else{
				color:lighten($border,5%);	
			}
			background:none;			 
			border-color:lighten($border,5%);
		}
		&:hover{			
			@if $color == $defaultFontColor{	//.king-default 需要特殊处理color
				color:#555;
				background-color: #ddd;
			}@else{
				color:#fff;
				background-color:$background;
			}
		}
	}
}
.king-btn{
	min-width:90px;
	display:inline-block;
	white-space:nowrap;
	outline:none;
	cursor:pointer;
	padding:6px 10px;
	text-align:center;
	line-height:16px;
	vertical-align:middle;
	font-size:12px;
	background: defaultBgColor;
	border:1px solid #eee;
	color:$defaultFontColor;
	
	&:hover{background-color:#e1e1e1;text-decoration:none;color:#555;}
	&.king-disabled{background-color:#f5f5f5;border-color:#e9e9e9;}
	&.king-noborder{border:none!important;}
	&.king-radius{border-radius:2px;}
	&.king-round{border-radius:20px;}

	&.king-minw{min-width:110px;}
	&.king-btn-mini{padding:1px 5px;min-width:50px;}
	&.king-btn-small{padding:3px 10px;min-width:70px;}
	&.king-btn-large{padding:10px 16px;min-width:120px;font-size:16px;}	 

	&.king-default {
	 	@include button-create($defaultFontColor, $defaultBgColor, $defaultBorderColor);
	}
	&.king-info {
	 	@include button-create($infoFontColor, $infoBgColor, $infoBorderColor);
	}
	&.king-primary{
		@include button-create($primaryFontColor, $primaryBgColor, $primaryBorderColor);
	}
	&.king-success{
		@include button-create($successFontColor, $successBgColor, $successBorderColor);
	}
	&.king-warning{
		@include button-create($warningFontColor, $warningBgColor, $warningBorderColor);
	}
	&.king-danger{
		@include button-create($dangerFontColor, $dangerBgColor, $dangerBorderColor);
	}
	&.king-disabled{
		cursor:default;
	}
	&.king-file-btn{
		overflow:hidden;
		position:relative;
	}
	&.king-file-btn input[type=file]{
		width:150%;height:100%;font-size:300px;opacity:0;filter:alpha(opacity=0); cursor:pointer;
		left:-40px;right:0;bottom:0;top:0;position:absolute;padding:0px;margin:0px;overflow:hidden;
	}

	&.king-btn-icon{
		width:30px;
		min-width:30px;
		padding-left:0;
		padding-right:0;
		.btn-icon{
			margin-right:0;
		}
		&.king-btn-mini{
			width:24px;
			min-width:24px;
		}
		&.king-btn-small{
			width:28px;
			min-width:28px;
		}
		&.king-btn-large{
			width:38px;
			min-width:38px;
		}
	}	
	.btn-icon{
		margin-right:5px;
	}
}

.king-btn-group{
	margin-right: 1px;
	display: inline-block;
	.king-btn{
		float: left;
		margin-left: -1px;
		&:first-child{
			margin-left: 0;
		}
	}

	.king-round{
		border-radius: 0;
		&:first-child{
			border-radius: 20px 0 0 20px;
		}
		&:last-child{
			border-radius: 0 20px 20px 0;
		}
	}

	.king-radius{
		border-radius: 0;
		&:first-child{
			border-radius: 2px 0 0 2px;
		}
		&:last-child{
			border-radius: 0 2px 2px 0;
		}
	}

	&:after{
		content: '.';
	    display: block;
	    height: 0;
	    clear: both;
	    visibility: hidden;
	}

	&.king-btn-justified {
	    display: table;
	    width: 100%;
	    table-layout: fixed;
	    border-collapse: separate;

	    .king-btn{
    	    display: table-cell;
		    float: none;
		    width: 100%;
	    }
	}
}

